<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2015/3/26
  Time: 10:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>review</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <%--<link rel="stylesheet" href="<%=request.getContextPath() %>/resources/css/cart/shopcart.css" type="text/css" media="all" />--%>
    <link href="<%=request.getContextPath()%>/resources/css/order/order.css" rel="stylesheet" type="text/css" media="all" />
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <%--<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/cart/shopcart.js"></script>--%>
    <script src="<%=request.getContextPath() %>/resources/js/jquery-1.8.3.js"></script>

   <script type="text/javascript">

       function doCommment() {
           var level = document.getElementById('level');
          // alert("*****"+level.value);
           //alert("*****评论等级或评论内容不能为空！");
           var usercomment = document.getElementById('usercomment');
           //alert("*****" +usercomment.value);
           if(""==level.value||""==usercomment.value){
               alert("评论等级或评论内容不能为空！");
           } else{
           document.getElementById("commentForm").action="<%=request.getContextPath()%>/comment/addComment";
           document.getElementById("commentForm").submit();
           }
//           var content=document.getElementById("content");
//           var len=content.rows.length;
//           for(var i=1;i<len;i++){
//               content.deleteRow(1);
//           }
       }
   </script>
    <script type="text/javascript">
        $(document).ready(function() {
    var level= document.getElementById('level');
    $("#t1").hover(function () {
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c4.jpg)");
    $("#t1").css("background-repeat", "no-repeat");

    },function(){
    if(!this.f){
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    }
    }
    );

    $("#t1").toggle(
    function(){
    this.f=true;
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c4.jpg)");
    $("#t1").css("background-repeat", "no-repeat");
    level.value=1;

    },function(){
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t1").css("background-repeat", "no-repeat");
    });


    $("#t2").hover(function () {
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c4.jpg)");
    $("#t1").css("background-repeat", "no-repeat");
    $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c4.jpg)");
    $("#t2").css("background-repeat", "no-repeat");

    },function(){
    if(!this.f){
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");

    }
    }
    );

    $("#t2").toggle(
    function(){
    this.f=true;
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c4.jpg)");
    $("#t1").css("background-repeat", "no-repeat");
    $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c4.jpg)");
    $("#t2").css("background-repeat", "no-repeat");
    level.value=2;
    },function(){
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t1").css("background-repeat", "no-repeat");
    $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t2").css("background-repeat", "no-repeat");
    });

    $("#t3").hover(function () {
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c3.jpg)");
    $("#t1").css("background-repeat", "no-repeat");
    $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c3.jpg)");
    $("#t2").css("background-repeat", "no-repeat");
    $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c3.jpg)");
    $("#t3").css("background-repeat", "no-repeat");
    },function(){
    if(!this.f){
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    }
    }
    );

    $("#t3").toggle(
    function(){
    this.f=true;
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c3.jpg)");
    $("#t1").css("background-repeat", "no-repeat");
    $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c3.jpg)");
    $("#t2").css("background-repeat", "no-repeat");
    $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c3.jpg)");
    $("#t3").css("background-repeat", "no-repeat");
    level.value=3;


    },function(){
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t1").css("background-repeat", "no-repeat");
    $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t2").css("background-repeat", "no-repeat");
    $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t3").css("background-repeat", "no-repeat");
    });

    $("#t4").hover(function () {
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
    $("#t1").css("background-repeat", "no-repeat");
    $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
    $("#t2").css("background-repeat", "no-repeat");
    $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
    $("#t3").css("background-repeat", "no-repeat");
    $("#t4").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
    $("#t4").css("background-repeat", "no-repeat");
    },function(){
    if(!this.f){
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t4").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    }
    }
    );

    $("#t4").toggle(
    function(){
    this.f=true;
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
    $("#t1").css("background-repeat", "no-repeat");
    $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
    $("#t2").css("background-repeat", "no-repeat");
    $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
    $("#t3").css("background-repeat", "no-repeat");
    $("#t4").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
    $("#t4").css("background-repeat", "no-repeat");
    level.value=4;
    },function(){
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t1").css("background-repeat", "no-repeat");
    $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t2").css("background-repeat", "no-repeat");
    $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t3").css("background-repeat", "no-repeat");
    $("#t4").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t4").css("background-repeat", "no-repeat");
    });

    $("#t5").hover(function () {
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
    $("#t1").css("background-repeat", "no-repeat");
    $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
    $("#t2").css("background-repeat", "no-repeat");
    $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
    $("#t3").css("background-repeat", "no-repeat");
    $("#t4").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
    $("#t4").css("background-repeat", "no-repeat");
    $("#t5").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
    $("#t5").css("background-repeat", "no-repeat");
    },function(){
    if(!this.f){
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t4").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t5").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    }
    }
    );

    $("#t5").toggle(
    function(){
    this.f=true;
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
    $("#t1").css("background-repeat", "no-repeat");
    $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
    $("#t2").css("background-repeat", "no-repeat");
    $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
    $("#t3").css("background-repeat", "no-repeat");
    $("#t4").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
    $("#t4").css("background-repeat", "no-repeat");
    $("#t5").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c2.jpg)");
    $("#t5").css("background-repeat", "no-repeat");
    level.value=5;

    },function(){
    $("#t1").css("background-image", "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t1").css("background-repeat", "no-repeat");
    $("#t2").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t2").css("background-repeat", "no-repeat");
    $("#t3").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t3").css("background-repeat", "no-repeat");
    $("#t4").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t4").css("background-repeat", "no-repeat");
    $("#t5").css("background-image",  "url(<%=request.getContextPath() %>/resources/images/c1.jpg)");
    $("#t5").css("background-repeat", "no-repeat");
    })
    });
    </script>
</head>
<body>
<div id="container">
    <%@include file="/jsp/public/top.jspf"%>
    <div id="mainbody">


        <div class="wrap">
             <h2 class="page-header" >顾客评价</h2>

            <table class="table table-bordered table-striped table-hover" id="content">
                <thead>
                <tr>
                    <th colspan="2">商品信息</th>
                    <th>单价（元）</th>
                    <th>数量</th>
                    <th>评价等级</th>
                    <th>评价内容</th>
                    <th>操作</th>
                </tr>
                </thead>
                </thead>
                <tbody>

                <%--<c:forEach items="${order.orderItems}" var="orderItem">--%>
                    <c:forEach items="${order}" var="orderItem">

                    <%--<c:if test="${order.orderItems}!=null">--%>


                <%--</c:if>--%>
                    <form id="commentForm" method="post">
                    <tr>
                        <td>
                            <div style="width: 100px; height: 100px">
                                <img src="<%=request.getContextPath() %>/resources/images/goodsImages/${orderItem.goods.image}" alt=""/>
                            </div>

                        </td>
                        <td>${orderItem.goods.name}</td>
                        <td>${orderItem.goods.price}</td>
                        <td>${orderItem.quantity}
                            <input hidden="true" name="goodsId" value="${orderItem.goods.id}"/></td>
                          <td>
                              <table style="width: 100px; height: 100px">
                              <td><div id="t1" style=" height:20px;width:20px;background-image:url(<%=request.getContextPath() %>/resources/images/c1.jpg)"></div></td>
                                  <td> <div id="t2" style="height:20px;width:20px;background-image:url(<%=request.getContextPath() %>/resources/images/c1.jpg)"></div></td>
                                  <td><div id="t3" style=" height:20px;width:20px;background-image:url(<%=request.getContextPath() %>/resources/images/c1.jpg)"></div></td>
                                  <td><div id="t4" style=" height:20px;width:20px;background-image:url(<%=request.getContextPath() %>/resources/images/c1.jpg)"></div></td>
                                  <td><div id="t5" style=" height:20px;width:20px;background-image:url(<%=request.getContextPath() %>/resources/images/c1.jpg)"></div></td>
                                  <input id="level" hidden="true"  name="review" value=""/>
                              </table>
                         </td>
                        <td><textarea  id="usercomment" name="content"  style="width: 300px; height:100px" ></textarea>
                        </td>
                        <td>



                        <button type="button" class="btn btn-info" onclick="doCommment()">提交</button>
                        </td>
                    </tr>
                        <input hidden="true" name="orderId" value="${orderId}"/>
                </form>
                    </c:forEach>




                </tbody>

            </table>
        </div>

    </div>
    <div class="footPush"></div>
</div>
<%@include file="/jsp/public/footer.jspf"%>
</body>
</html>

